<template>
    <div class="login">
        <el-form ref="form" label-width="70px" :inline='true' :model="form" :rules="rules">
            <h3 class="login-title">用户登录</h3>
            <el-form-item label="用户名" prop="username">
                <el-input placeholder="输入用户名" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type='password' placeholder="输入密码" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                    <el-button style="margin-left:135px" type="primary" @click="OnLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// import Mock from 'mockjs'
import Cookie from 'js-cookie'
import { getMenu } from '../api/index'
import { mapActions } from 'vuex'

export default {
    name:'LoginModel',
    data() {
        return {
            form:{
                username:'',
                password:''
            },
            rules:{
                username:[
                    {required:true, trigger:'blur', message:'请输入用户名'}
                ],
                password:[
                    {required:true, trigger:'blur', message:'请输入密码'}
                ]
            }
        }
    },
    methods:{
        ...mapActions(['SetMenuData', 'SetMenuRouter']),
        OnLogin(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('login--', this.form)
                    

                    getMenu(this.form).then(({data})=>{
                        console.log(data)
                        if (data.code === 20000){
                            // 成功
                            // token存入cookie
                            Cookie.set('token', data.data.token)
                            // 数据送入vuex
                            this.SetMenuData(data.data.menu)
                            this.SetMenuRouter(this.$router)
                            // 跳转
                            this.$router.push('home')
                        }else{
                            this.$message.error(data.data.message)
                        }
                        // token信息
                        // const token = Mock.Random.guid()
                        
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.login{
    width: 350px;
    border: 1px solid #eaeaea;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 15px;
    box-shadow: 0 0 25px #cac6c6;
    background-color: #fff;
    .el-input{
        width: 198px;
    }
    .login-title{
        text-align: center;
        margin-bottom: 40px;
        color: #505458;
    }
}
</style>